{% extends 'home/public/base.html' %}

{% block title %}
    <title>我的订单</title>
{% endblock %}

{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/home/css/order.css">
    <link rel="stylesheet" type="text/css" href="/static/home/css/order-app.css">

{% endblock %}


{% block con %}
<div class="mainbody order">
    <div class="container">
        <!-- 面包屑导航 -->
        <div class="crumbs col-xs-12 col-sm-12">
            <ol class="breadcrumb">
                <li class="hidden-xs hidden-sm"><a href="index.html">首页</a></li>
                <li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>
                <li class="active">我的订单</li>
            </ol>
        </div><!-- 面包屑导航 E-->

        <div class="main clearfix">
            <!-- 左侧导航 -->
            <div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
                <div class="nav-main">
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>订单中心</a>
                    <a href="{% url 'myhome_myorder' %}" class="ml">我的订单</a>
                    <a href="#" class="ml ">我的回购单</a>
                    <a href="#" class="ml ">我的意外保</a>
                    <a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
                    <a href="{% url 'myhome_addrmanage' %}" class="ml active">地址管理</a>
                    <a href="#" class="ml ">我的收藏</a>
                    <a href="#" class="ml ">消息提醒</a>
                    <a href="#" class="ml ">建议反馈</a>
                </div>
            </div><!-- 左侧导航 E-->
            <!-- 右侧内容展示 -->
            <div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
                <div class="order-main">
                    <div class="type-tab-btn">
                        <a href="javascript:;" class="allOrder active col-20" data-type="-1">全部地址</a><i class="line hidden-xs hidden-sm">|</i>
{#                        <a class="waitPay col-20" href="javascript:;" data-type="0">待付款<span class="amount _actAmount"></span></a><i class="line hidden-xs hidden-sm">|</i>#}
{#                        <a class="waitDeliver col-20" href="javascript:;" data-type="1">待发货</a><i class="line hidden-xs hidden-sm">|</i>#}
{#                        <a class="hasDeliver col-20" href="javascript:;" data-type="2">已发货</a><i class="line hidden-xs hidden-sm">|</i>#}
{#                        <a class="other col-20" href="javascript:;" data-type="99">其他</a>#}
                    </div>
                    <div class="list-head hidden-xs hidden-sm">
                    <ul class="clearfix">
                        <li class="w50">
{#                            <select id="checkType" class="check-type">#}
{#                                <option value="0">近三个月的订单</option>#}
{#                                <option value="0">收货人名称</option>#}
{#                                <option value="0">地址</option>#}
{#                                <option value="0">联系方式</option>#}
{#                                <option value="0">是否为默认地址</option>#}
{#                            </select>#}
{#                            订单明细#}
                        </li>
{#      表头#}

{#                        <li class="w125" style="margin-left: 100px;">收货人名称</li>#}
{#                        <li class="w125"  style="margin-left: 100px;">地址</li>#}
{#                        <li class="w125"  style="margin-left: 100px;">联系方式</li>#}
{#                        <li class="w125"  style="margin-left: 100px;">是否为默认地址</li>#}
                    </ul>
                    </div>

{#                新增地址模态框#}
                <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">
                    新增地址
               </button>

               <!-- Modal -->
               <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                 <div class="modal-dialog" role="document">
                   <div class="modal-content">
                             <div class="modal-header">
                               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                               <h4 class="modal-title" id="myModalLabel">新增地址</h4>
                             </div>
                    <form>
                     <div class="modal-body">
                         <div class="form-group">
                           <label >收货人</label>
                           <input type="text" name="addressname" class="form-control">
                         </div>
                         <div class="form-group">
                           <label >收货地址</label>
                           <input type="text" name="address" class="form-control">
                         </div>

                         <div class="form-group">
                           <label >收货电话</label>
                           <input type="text" name="addressphone" class="form-control">
                         </div>

                         <div class="checkbox">
                           <label>
                             <input type="checkbox" name="status" value="1"> 是否默认
                           </label>
                         </div>

                     </div>
                         <div class="modal-footer">
                           <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                           <button type="button" class="btn btn-primary" id="CreateAddress">添加</button>
                         </div>
                    </form>
                   </div>
                   </div>
                   </div>
       {#                新增地址模态框#}










                <div class="row">
                                        <div style="height: 50px;color: #ff6700;font-size: 18px;" class="col-md-3">收货人名称</div>
                                        <div style="height: 50px;color: #ff6700;font-size: 18px;" class="col-md-3">地址</div>
                                        <div style="height: 50px;color: #ff6700;font-size: 18px;" class="col-md-3">联系方式</div>
                                        <div style="height: 50px;color: #ff6700;font-size: 18px;" class="col-md-3">是否为默认地址</div>
                              </div>
{#                    {% for v in ob %}#}
{#                        <span>{{ v.addressname }}</span>#}
{#                        <span>{{ v.address }}</span>#}
{#                        <span>{{ v.addressphone }}</span>#}
{#                        <span>{{ v.status }}</span>#}
{#                    {% endfor %}#}

{##}

                        <div>

{#                                    <div class="row">#}
{#                                      <div style="background: red" class="col-md-4">.col-md-4</div>#}
{#                                      <div class="col-md-4">.col-md-4</div>#}
{#                                      <div class="col-md-4">.col-md-4</div>#}
{#                                    </div>#}
                                <div class="row">
                                    <input type="text" class="col-md-3" name="addr1" value="{{ ob.addressname }}">
                                    <input type="text" class="col-md-3" name="addr2" value="{{ ob.address }}">
                                    <input type="text" class="col-md-3" name="addr3" value="{{ ob.addressphone }}">
                                    <input type="hidden" value="{{ ob.id }}">
                                    <div class="col-md-2">

                                        {% if ob.status == 0 %}
                                            <input name="status" type="checkbox" id="morendizhi">默认地址
                                        {% else %}
                                            <input name="status" checked type="checkbox" id="morendizhi">默认地址
                                        {% endif %}
                                    </div>
                                    <button class="col-md-1" id="saveedit">保存</button>
                              </div>

                        </div>

                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}


   {% block js %}
    <script type="text/javascript">//回顶部
        backTop();
        //顶部导航鼠标经过出现内容
        topNav();
        //登录图片鼠标经过
        topLogin();
        //
        leftNav();

  // 地址的添加
    $('#CreateAddress').click(function(){
        var data = {}
        // 获取表单中的数据
        data.addressname = $(this).parents('form').find('input[name=addressname]').val()
        data.address = $(this).parents('form').find('input[name=address]').val()
        data.addressphone = $(this).parents('form').find('input[name=addressphone]').val()
        data.status = 0
        if( $(this).parents('form').find('input[name=status]').prop('checked')){
            data.status = 1
        }

        // 发送ajax 添加地址
        $.get('{% url "myhome_addressinsert" %}',data,function(data){
            if(data.error == 0){
                location.href=location.href
            }
            alert(data.msg)
        })


    })




//   地址的修改
    $('#saveedit').click(function(){
        var data = {};
        // 获取input中的数据
        data.addressname = $(this).parent().children('input:nth-child(1)').val()
        data.address = $(this).parent().children('input:nth-child(2)').val()
        data.addressphone = $(this).parent().children('input:nth-child(3)').val()
        data.id = $(this).parent().children('input:nth-child(4)').val()
{#        if($('#morendizhi').val()==true){#}
{#        data.status = 1#}
{#        }else{data.status = 0}#}
        if( $(this).parent().find('input[name=status]').prop('checked')){
            data.status = 1
        }else{data.status = 0};
        // 发送ajax 修改地址
        $.get('{% url "myhome_addreditupdate" %}',data,function(data){
            if(data.error == 0){
                location.href=location.href;
            }
            alert(data.msg)
        })


    })


    </script>
    {% endblock %}
